<style>
    .matrix-lable-left {
        text-align-last: left
    }
    .openApi-content {
        padding: 20px;
    }
    .openApi-content .row .col-sm-12 {
        line-height: 32px;
    }
    .openApi-content .fa-size {
        font-size: 18px;
        color: #23b7e5;
    }
    .openApi-content .btn-test {
        float: right;
    }
    .textdiff span {
        color: gray;
    }
    .match{
        color: gray;
    }
    .ins{
        color: black;
        background: #bbffbb;
    }
    .del{
        color: black;
        background: #ffbbbb;
    }
</style>
<div class="wrapper-md openApi-content">
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">接&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;口：</label>
                <div class="col-sm-4">
                    <m-ui-select prompt="请选择接口..."
                                 itme-list="info.apiList"
                                 selected-item="info.sltApiItem"
                                 select-item-fun="selectApiFun(item)">
                    </m-ui-select>
                </div>
                <div class="col-sm-5 hide">
                    <button ng-click="doTry()">调试</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">参&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;数：</label>
                <div class="col-sm-4">
                    <div ng-if="info.showParamLoading">
                        <i class="fa fa-spinner fa-spin fa-2x"></i>
                    </div>
                    <m-ui-select ng-if="!info.showParamLoading"
                                 prompt="请选择参数种类..."
                                 itme-list="info.paramsList"
                                 selected-item="info.sltParamItem"
                                 select-item-fun="selectParamFun(item)">
                    </m-ui-select>
                </div>
                <div class="col-sm-5">
                    <i popover="请选择可选的参数，该参数集合由测试用例维护！" popover-trigger="mouseenter" class="fa fa-question-circle fa-size"></i>
                    <button class="btn btn-default" ng-click="openModal('add')">添加参数</button>
                    <button class="btn btn-default" ng-click="openModal('update')" ng-disabled="info.isDefault">修改参数</button>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-12">
            <div class="form-group matrix-lable-left">
                <label class="col-sm-1 control-label">输入/输出：</label>
                <div class="col-sm-8">
                    <tabset>
                        <tab ng-repeat="tab in info.tabList"
                             heading="{{tab.name}}"
                             active="tab.active"
                             ng-click="tabClick(tab)">
                        </tab>
                        <button class="btn btn-xs btn-success btn-test" ng-click="testClick()">调试</button>
                    </tabset>
                    <!-- 显示输入或者输出 -->
                    <div class="jsonView" ng-if="!info.isDiff">
                        <json ng-if="info.updateJson"
                              child="info.jsonData" 
                              default-collapsed="false" 
                              change-keys=""
                              custom-types="" 
                              type="object">
                        </json>
                    </div>
                    <!-- 显示对比 -->
                    <div ng-if="info.isDiff">
                        <div class="col-sm-6">
                            <span>期望输出：</span>
                            <pre>{{info.leftObj}}</pre>
                        </div>
                        <div class="col-sm-6">
                            <span>实际输出：</span>
                            <pre class='textdiff' line-diff left-obj='info.leftObj' right-obj='info.rightObj'></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>




